<template>
    <div>
        <!-- 控制模态框是否显示 -->
        <button @click="open = true">Open Modal</button>

        <!-- 模态框代码 -->
        <Teleport to="body">
            <div v-if="open" class="modal">
                <p>Hello from the modal!</p>
                <button @click="open = false">Close</button>
            </div>
        </Teleport>
    </div>
</template>

<script>


export default {
    data() {
        return {
            open: false  // 控制模态框是否显示
        }
    }
}
</script>
<style scoped>
.modal {
    position: fixed;
    z-index: 999;
    top: 20%;
    left: 50%;
    width: 300px;
    margin-left: -150px;
}
</style>